<template>
    <el-card v-loading="loading.data">
        <div slot="header">编辑
            <el-button type="text" @click="$router.push('/anchor/'+anchor.id)">{{anchor.name}}</el-button>
            的直播记录
        </div>
        <el-form label-width="130px">
            <el-form-item label="所属项目">
                <el-button type="text" @click="$router.push('/project/'+project.id)">{{project.name}}</el-button>
            </el-form-item>
            <el-form-item label="所属直播平台">
                {{platform.name}}
            </el-form-item>
            <el-form-item label="所属主播">
                <el-button type="text" @click="$router.push('/anchor/'+anchor.id)">{{anchor.name}}</el-button>
            </el-form-item>
            <el-form-item label="直播时间">
                <el-date-picker v-model="schedule.time"
                                :editable="false"
                                type="datetimerange"
                                format="yyyy-MM-dd HH:mm:00"/>
            </el-form-item>
            <el-form-item label="截图间隔">
                <el-input-number v-model="schedule.loop"/>
            </el-form-item>
            <el-form-item label="最后截图时间">
                <el-date-picker type="datetime" v-model="schedule.last"
                                format="MM月dd日 HH点mm分ss秒"
                                disabled
                                v-if="schedule.last"/>
                <template v-else>无</template>
            </el-form-item>
            <el-form-item label="预计下次截图时间">{{nextScreenshotTime}}
            </el-form-item>
            <el-form-item label="最高在线人数">
                <el-input-number v-model="schedule.online"/>
            </el-form-item>
            <el-form-item label="是否有二维码">
                <el-checkbox v-model="schedule.qrcode"/>
            </el-form-item>
            <el-form-item label="弹幕数量">
                <el-input v-model="schedule.danmu"/>
            </el-form-item>
            <el-form-item label="成本">
                <el-input v-model="schedule.cost"/>
            </el-form-item>
            <el-form-item label="点击">
                <el-input-number v-model="schedule.click"/>
            </el-form-item>
            <el-form-item label="新增">
                <el-input-number v-model="schedule.added"/>
            </el-form-item>
            <el-form-item label="回流">
                <el-input-number v-model="schedule.reflux"/>
            </el-form-item>
            <el-form-item label="选择硬广截图">
                <el-button @click="selectPlatformImage">挑选硬广截图</el-button>
                <image_carousel v-model="schedule.image_id"
                                @change="image=>schedule.image=image"
                                :visible.sync="dialog.platform"
                                :loading="loading.platform"
                                :data="images.platform"/>
                或
                <el-button @click="uploadDialog.platform=true">上传</el-button>
                <upload_screenshot :visible.sync="uploadDialog.platform"
                                   mode="platform"
                                   :schedule="schedule"
                                   @complete="uploadPlatformImageComplete"/>
                <template v-if="schedule.image_id">
                    <el-tag>
                        <a :href="'/pic/'+schedule.image.file+'/预览.jpg'" target="_blank">打开查看</a>
                        或者
                        <a href="javascript:void(0)" @click="removePlatformImage">删除</a>
                    </el-tag>
                </template>
            </el-form-item>
            <el-form-item label="选择主播截图">
                <el-button @click="selectAnchorImage">挑选主播截图</el-button>
                <image_carousel v-model="schedule.selected_anchor_image_id"
                                :multi="true"
                                :visible.sync="dialog.anchor"
                                :loading="loading.anchor"
                                :data="images.anchor"/>
                或
                <upload_screenshot :visible.sync="uploadDialog.anchor"
                                   mode="anchor"
                                   :schedule="schedule"
                                   @complete="uploadAnchorImageComplete"/>
                <el-button @click="uploadDialog.anchor = true">上传</el-button>
                <el-tag>已选择 {{schedule.selected_anchor_image_id.length}} 张主播截图</el-tag>
            </el-form-item>
            <el-form-item>
                <el-button @click="submit" type="primary">保存</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
    import _ from 'lodash';

    import Image_carousel from "../component/image_carousel";
    import Upload_screenshot from "../component/upload_screenshot";

    export default {
        components: {
            Upload_screenshot,
            Image_carousel
        },
        data() {
            return {
                project: {},
                platform: {},
                anchor: {},
                schedule: {selected_anchor_image_id: [], time: [], image_id: null,},
                images: {anchor: [], platform: []},
                loaded: {anchor: false, platform: false},
                dialog: {anchor: false, platform: false,},
                uploadDialog: {anchor: false, platform: false},
                loading: {data: true, anchor: false, platform: false},
                nextScreenshotTime: '无',//下次截图时间
            };
        },
        methods: {
            fetch() {
                this.loading.data = true;
                const {schedule_id} = this.$route.params;
                this.$http.get(`/api/schedule/${schedule_id}`).then(res => {
                    this.loading.data = false;
                    const {project, platform, anchor, schedule} = res.data;
                    this.project = project;
                    this.platform = platform;
                    this.anchor = anchor;
                    this.schedule = schedule;
                    // this.$set('schedule',schedule);
                    this.$set(this.schedule, 'time', [new Date(schedule.start), new Date(schedule.end)]);
                    if (this.schedule.time[1] > new Date()) {
                        let last = this.schedule.last ? new Date(this.schedule.last).getTime() + this.schedule.loop * 60000 : Date.now();
                        this.nextScreenshotTime = moment(last).format('MM月DD日 HH点mm分');
                    }
                }).catch(err => {
                    this.$router.replace('/404');
                });
            },
            submit() {
                this.schedule.start = this.schedule.time[0];
                this.schedule.end = this.schedule.time[1];
                this.$http.post(`/api/schedule/${this.schedule.id}`, this.schedule).then(() => {
                    this.$message.success('保存成功');
                }).catch(err => {
                    this.$message.error(err.response.data);
                });
            },
            loadAnchorImage() {
                const {schedule_id} = this.$route.params;
                this.loading.anchor = true;
                this.$http.get(`/api/schedule/${schedule_id}/anchor_image`).then(res => {
                    this.images.anchor = res.data;
                    this.loading.anchor = false;
                    this.loaded.anchor = true;
                });
            },
            selectAnchorImage() {
                if (!this.loaded.anchor)
                    this.loadAnchorImage();
                this.dialog.anchor = true;
            },
            loadPlatformImage() {
                const {schedule_id} = this.$route.params;
                this.loading.platform = true;
                this.$http.get(`/api/schedule/${schedule_id}/platform_image`).then(res => {
                    this.images.platform = res.data;
                    this.loading.platform = false;
                    this.loaded.platform = true;
                });

            },
            selectPlatformImage() {
                if (!this.loaded.platform)
                    this.loadPlatformImage();
                this.dialog.platform = true;
            },
            removePlatformImage() {
                this.schedule.image_id = null;
                this.schedule.image = {};
            },
            uploadPlatformImageComplete(images) {
                if (_.isEmpty(images))
                    return;
                if (images.length === 1) {
                    let image = images[0];
                    this.$confirm('硬广截图上传成功，将这张图片选为硬广截图吗？').then(() => {
                        this.schedule.image_id = image.id;
                        this.schedule.image = image;
                    }).catch(() => {
                    });
                } else {
                    this.$message.success(images.length + ' 张图片上传成功，请去挑选图片');
                }
                this.loadPlatformImage();
            },
            uploadAnchorImageComplete(images) {
                let message = images.length + ' 张图片上传成功，';
                this.$confirm(message, {type: 'warning'}).then(() => {
                    this.schedule.selected_anchor_image_id.push(...images.map(image => image.id));
                });
                this.loadAnchorImage();
            },
        },
        mounted() {
            this.fetch();
        }
    }
</script>

<style scoped>

</style>